<div (mouseenter)="!readOnly && showEditIcon()" (mouseleave)="!readOnly && hideEditIcon()"
    style="display: flex;flex-wrap: nowrap;align-items: center;">
    <ng-container *ngIf="!editView">
        <ng-container *ngIf="inputOptions.length>1">
            <mat-chip-list aria-label="chip list selection">
                <mat-chip >
                    {{getLabel(inputOptions)[0]|translate}}
                </mat-chip>
                <mat-chip [matMenuTriggerFor]="more">
                    +{{(inputOptions.length-1)}} {{'MORE'|translate}}
                </mat-chip>
                <mat-menu #more="matMenu">
                    <ng-template matMenuContent>
                        <div  style="display: flex;flex-direction: column;padding: 8px;">
                            <mat-chip *ngFor="let e of removeFirst(getLabel(inputOptions))" mat-menu-item style="margin-bottom:8px">
                                {{e|translate}}
                            </mat-chip>
                        </div>
                    </ng-template>
                </mat-menu>
            </mat-chip-list>
        </ng-container>
        <ng-container *ngIf="inputOptions.length<=1">
            <mat-chip-list aria-label="chip list selection">
                <mat-chip *ngFor="let e of getLabel(inputOptions)">
                    {{e|translate}}
                </mat-chip>
            </mat-chip-list>
        </ng-container>
    </ng-container>
    <div *ngIf="editView">


        <ng-container *ngIf="inputOptionsNext.length>1">
            <mat-chip-list aria-label="chip list selection">
                <mat-chip [selectable]="true" [removable]="true">
                    {{getLabel(inputOptionsNext)[0]|translate}}
                    <mat-icon matChipRemove (click)="remove(e)">cancel</mat-icon>
                </mat-chip>
                <mat-chip [matMenuTriggerFor]="more">
                    +{{(inputOptionsNext.length-1)}} {{'MORE'|translate}}
                </mat-chip>
                <mat-menu #more="matMenu">
                    <ng-template matMenuContent>
                        <div  style="display: flex;flex-direction: column;padding: 8px;">
                            <mat-chip *ngFor="let e of removeFirst(getLabel(inputOptionsNext))" mat-menu-item style="margin-bottom:8px"  [selectable]="true" [removable]="true">
                                {{e|translate}}
                                <mat-icon matChipRemove (click)="remove(e)">cancel</mat-icon>
                            </mat-chip>
                        </div>
                    </ng-template>
                </mat-menu>
            </mat-chip-list>
        </ng-container>
        <ng-container *ngIf="inputOptionsNext.length<=1">
            <mat-chip-list aria-label="chip list selection">
                <mat-chip *ngFor="let e of getLabel(inputOptionsNext)" [selectable]="true" [removable]="true">
                    {{e|translate}}
                    <mat-icon matChipRemove (click)="remove(e)">cancel</mat-icon>
                </mat-chip>
            </mat-chip-list>
        </ng-container>

        <!-- <mat-chip-list aria-label="chip list selection">
            <mat-chip *ngFor="let e of getLabel(inputOptionsNext)" [selectable]="true" [removable]="true">
                {{e|translate}}
                <mat-icon matChipRemove (click)="remove(e)">cancel</mat-icon>
            </mat-chip>
        </mat-chip-list> -->
    </div>
    <ng-container *ngIf="editView">

        <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon [color]="'primary'">add_circle
            </mat-icon>
        </button>
        <mat-menu #menu="matMenu">
            <ng-template matMenuContent>
                <button *ngFor="let e of list" mat-menu-item (click)="selected(e)">
                    <span>{{e.label|translate}}</span>
                </button>
                <ng-container *ngIf="!allLoaded && !loading">
                    <div #ghostRef style="display: flex;justify-content: center;">
                        <mat-progress-spinner [color]="'primary'" [mode]="'indeterminate'" [diameter]="40">
                        </mat-progress-spinner>
                    </div>
                </ng-container>
            </ng-template>
        </mat-menu>
        <button mat-icon-button>
            <mat-icon [color]="'primary'" (click)="doUpdate()">check_circle_outline</mat-icon>
        </button>
        <button mat-icon-button>
            <mat-icon [color]="'error'" (click)="doCancel()" style="margin: auto;">cancel</mat-icon>
        </button>
    </ng-container>
    <mat-icon *ngIf="!readOnly&&!editView" [ngStyle]="{'visibility':displayEdit}" [color]="'primary'" (click)="doEdit()"
        style="padding-right: 8px;cursor: pointer;">edit
    </mat-icon>
</div>